<template>

  <div class="background" :style="{ backgroundImage: `url(${bg1Url})` }">
    <div class="top">
      <img :src="bg3Url" alt="top" />
    </div>
    <div class="record">
      <h1>今日访问：12345</h1>
    </div>

  </div>


  <div class="background" :style="{ backgroundImage: `url(${bg2Url})` }">
    <div class="title-flex">
      <h1>功能介绍</h1>
    </div>

    <swiper :slides-per-view="1" :loop="true" :autoplay="{ delay: 3000 }" :modules="[Autoplay]" class="swiper">
      <swiper-slide v-for="(img, index) in images" :key="index">
        <img :src="img" alt="slide" />
      </swiper-slide>
    </swiper>
  </div>

  <div class="background" :style="{ backgroundImage: `url(${bg5Url})` }">
    <div class="title-flex">
      <h1>资源推荐</h1>
    </div>

    <div class="nav-grid">
      <div class="nav-item">
        <img :src="docIcon" alt="文档资料" />
        <p>文档资料</p>
      </div>
      <div class="nav-item">
        <img :src="courseIcon" alt="教程课程" />
        <p>教程课程</p>
      </div>
      <div class="nav-item">
        <img :src="toolsIcon" alt="软件工具" />
        <p>软件工具</p>
      </div>
      <div class="nav-item">
        <img :src="designIcon" alt="设计素材" />
        <p>设计素材</p>
      </div>
      <div class="nav-item">
        <img :src="codeIcon" alt="编程资源" />
        <p>编程资源</p>
      </div>
      <div class="nav-item">
        <img :src="gameIcon" alt="游戏mod" />
        <p>游戏mod</p>
      </div>
      <div class="nav-item">
        <img :src="packIcon" alt="线上工具" />
        <p>线上工具</p>
      </div>

    </div>

  </div>

  <div class="background" :style="{ backgroundImage: `url(${bg5Url})` }" ref="chartSection">
    <div class="title-flex">
      <h1>资源统计</h1>
    </div>

    <div class="chart-row">
      <div class="chart-box1">
        <LineChart v-if="showCharts" :category="lineChart" />
      </div>
      <div class="chart-box2">
        <PieChart v-if="showCharts" :category="pieChart" />
      </div>
    </div>
  </div>


</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/autoplay'
import { Autoplay } from 'swiper/modules'
import LineChart from '@/components/LineChart.vue'
import PieChart from '@/components/PieChart.vue'
import { onMounted, onUnmounted, ref, Static } from 'vue'
import { Statistic } from '@/model/HomeModels'
import { getStatisticByType } from '@/service/HomeService'

const bg1Url = new URL('@/assets/images/background/home_bg1.png', import.meta.url).href
const bg2Url = new URL('@/assets/images/background/home_bg2.png', import.meta.url).href
const bg3Url = new URL('@/assets/images/ic/ic_head.png', import.meta.url).href
const bg5Url = new URL('@/assets/images/background/home_bg5.png', import.meta.url).href

const docIcon = new URL('@/assets/images/ic/ic_document.png', import.meta.url).href
const courseIcon = new URL('@/assets/images/ic/ic_course.png', import.meta.url).href
const toolsIcon = new URL('@/assets/images/ic/ic_sw_tool.png', import.meta.url).href
const designIcon = new URL('@/assets/images/ic/ic_design.png', import.meta.url).href
const codeIcon = new URL('@/assets/images/ic/ic_package_tool.png', import.meta.url).href
const gameIcon = new URL('@/assets/images/ic/ic_game_plug.png', import.meta.url).href
const packIcon = new URL('@/assets/images/ic/ic_online_tool.png', import.meta.url).href

const images = [
  new URL('@/assets/images/slide/home_slide1.png', import.meta.url).href,
  new URL('@/assets/images/slide/home_slide2.png', import.meta.url).href,
  new URL('@/assets/images/slide/home_slide3.png', import.meta.url).href,
]

const lineChart = ref<Statistic>({
  label: '',
  labels: [],
  data: []
})

const pieChart = ref<Statistic>({
  label: '',
  labels: [],
  data: []
})

const showCharts = ref(false)
const chartSection = ref<HTMLElement | null>(null)
let observer: IntersectionObserver

onMounted(() => {

  getStatisticByType('quantity')
    .then(result => {
      if (result) {
        pieChart.value = result
        console.log(`获取统计数据${JSON.stringify(result)}...`)
      }
    })
  getStatisticByType('download')
    .then(result => {
      if (result) {
        lineChart.value = result
        console.log(`获取统计数据${JSON.stringify(result)}...`)
      }
    })

  observer = new IntersectionObserver(
    ([entry]) => {
      if (entry.isIntersecting) {
        showCharts.value = true
        observer.disconnect() // 只加载一次
      }
    },
    {
      root: null,
      threshold: 0.4 // 元素有 20% 进入视口时触发
    }
  )

  if (chartSection.value) {
    observer.observe(chartSection.value)
  }
})

onUnmounted(() => {
  observer?.disconnect()
})
</script>

<style scoped>
.record {
  position: absolute;
  top: 20px;
  /* 距离顶部的距离 */
  right: 40px;
  /* 距离右侧的距离 */
  font-size: 1.0em;
  font-weight: bold;
  color: #000000;
  /* 如果背景是深色的，用白字 */
  z-index: 10;
  /* 确保显示在最上层 */
}


.top {
  width: 52%;
  height: 180px;
  margin: 0 auto;
  /* 让整个 .top 容器水平居中 */
  display: flex;
  justify-content: center;
  /* 子元素水平居中 */
  align-items: center;
  /* 子元素垂直居中 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  overflow: hidden;
}

.top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper {
  width: 60%;
  height: 580px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  /* 给轮播容器加圆角 */
  overflow: hidden;
  /* 防止图片溢出圆角范围 */
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4列 */
  gap: 160px;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.nav-item {
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s;
  border-radius: 20px;
  /* 容器圆角 */
  background-color: transparent;
  /* 背景透明 */
  overflow: visible;
  /* 容器不裁剪溢出 */
  padding: 10px 0;
  /* 上下间距 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-item img {
  width: 120px;
  /* 图片固定宽度 */
  aspect-ratio: 1 / 1;
  /* 保持正方形 */
  border-radius: 20px;
  /* 图片圆角 */
  object-fit: cover;
  /* 图片铺满，裁剪多余部分 */
  background-color: transparent;
  /* 图片背景透明 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.nav-item p {
  margin-top: 10px;
  font-size: 0.95em;
  color: #444;
}

/*图标放置鼠标变大*/
.nav-item:hover {
  transform: translateY(-15px);
}


.nav-item img {
  width: 120px;
  /* 图片固定宽度 */
  aspect-ratio: 1 / 1;
  /* 保持正方形 */
  border-radius: 20px;
  /* 图片圆角 */
  object-fit: cover;
  /* 图片铺满，裁剪多余部分 */
  background-color: transparent;
  /* 图片背景透明 */
}


.nav-item p {
  margin-top: 10px;
  font-size: 1.4em;
  color: #444;
}

.chart-row {
  display: flex;
  justify-content: flex-start;
  /* 左对齐图表 */
  gap: 50px;
  padding: 40px 80px 40px 240px;
  max-width: 1400px;
  margin: 0 auto;
}

.chart-box1 {
  width: 600px;
  height: 600px;
}

.chart-box2 {
  width: 400px;
  height: 400px;
}
</style>